<template>
  <v-container>
    <v-sheet color="thirdary" class="pa-0 pa-md-10">
      <v-sheet
        v-for="(ReserTable, index) in ReserTables"
        :key="index"
        elevation="2"
        class="pa-5 rounded-lg d-flex align-center flex-column flex-md-row justify-md-space-between text-body-1 text-md-h6 my-2"
      >
        <div>
          <v-avatar size="80" color="primary">
            <v-img :src="ReserTable.userInfo.avatar"></v-img>
          </v-avatar>
        </div>
        <div class="my-2 my-md-0">
          姓名:<span class="primary--text">{{
            ReserTable.userInfo.nickname
          }}</span>
        </div>
        <div class="my-2 my-md-0">
          手机号码:<span class="primary--text">{{
            ReserTable.userInfo.phone
          }}</span>
        </div>
        <div class="my-2 my-md-0">
          预约时间:<span class="primary--text">{{
            ReserTable.date + " " + ReserTable.time
          }}</span>
        </div>
        <div class="my-2 my-md-0">
          预约病例:<span class="primary--text">{{
            ReserTable.illness ? ReserTable.illness : "未选择"
          }}</span>
        </div>
      </v-sheet>
    </v-sheet>
  </v-container>
</template>



<script>
export default {
  data() {
    return {
      profile: null,
      doctorInfo: null,
      ReserTables: null,
    };
  },

  async mounted() {
    const { data: profile } = await this.$axios.get("profile");
    this.profile = profile;
    if (profile && profile.isDoctor) {
      const doctorInfo = await this.$store.dispatch(
        "getDoctorInfo",
        profile.userId
      );
      if (doctorInfo) {
        this.doctorInfo = doctorInfo;
        const { data } = await this.$axios.get(
          `reser-table/getReserTableWithDoctor?doctorInfoId=${doctorInfo?.id}`
        );
        if (data?.length) {
          this.ReserTables = data;
        }
      }
    }
  },
};
</script>



<style lang="scss" scoped>
</style>
